<template>
    <div class="new">
        <el-card>
            <div style="margin: 25px 0;width: 100%;display: flex;flex-direction: row;justify-content: space-between">
                <div style="display: flex;flex-direction: row;">
                    <div>
                        <label style="font-size: 16px;font-weight: 600">日志类型:</label>
                        <el-select v-model="search.clauses[0].value" style="width: 150px;margin-left: 5px" :value="search.clauses[0].value" clearable @change="initData">
                            <el-option value="SYSTEM" label="系统日志"></el-option>
                            <el-option value="LOGIN" label="登录日志"></el-option>
                            <el-option value="ERROR" label="错误日志"></el-option>
                        </el-select>
                    </div>
                    <div style="margin-left: 15px">
                        <label style="font-size: 16px;font-weight: 600">日志内容:</label>
                        <el-input @blur="initData" v-model="search.clauses[1].value" style="width: 300px;"></el-input>
                    </div>
                </div>
                <div>
                    <el-tooltip class="item" effect="dark" content="批量删除" placement="top">
                        <el-button type="danger" @click="deleteLogger" circle icon="el-icon-delete"></el-button>
                    </el-tooltip>
                </div>
            </div>
            <el-table
                    :data="loggerList"
                    stripe
                    :show-overflow-tooltip=true
                    :header-cell-style="tableHeader"
                    ref="multipleTable"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="type"
                        align="center"
                        label="日志类型"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="createDatetime"
                        label="创建时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="createDatetime"
                        label="更新时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        label="操作用户"
                        align="center"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{scope.row.userId | UserFilter}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ip"
                        align="center"
                        label="操作IP"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="logLevel"
                        align="center"
                        label="日志等级"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="requestUrl"
                        align="center"
                        label="操作路由"
                        width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="content"
                        label="日志内容"
                        min-width="300">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="80">
                    <template slot-scope="scope">
                        <el-button type="info" @click="showLogger(scope.row.id)" circle icon="el-icon-search"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 10px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="search.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="search.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="search.total">
            </el-pagination>
            <el-dialog  :title="loggerData.type+'日志'"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">
                    <div style="font-size: 18px;margin-top: 5px;letter-spacing: 2px">{{loggerData.content.split("|")[0]}}</div>
                    <div style="font-size: 18px;margin-top: 5px;letter-spacing: 2px">{{loggerData.content.split("|")[1]}}</div>
                    <div style="font-size: 18px;margin-top: 5px;letter-spacing: 2px">{{loggerData.content.split("|")[2]}}</div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
  import Message from '../../components/messages/index'
  import Filter from '../../utils/filter'
  export default {
    name: "Logger",
    data(){
      return{
        tableHeader:{
          "background-color":"#7fa1be99",
          "color":"white",
          "font-size":"18px"
        },
        loggerList:[],
        loggerData:{
          content:"",
          ip:"",
          logLevel:"",
          requestUrl:"",
          type:"",
          userId:""
        },
        search:{
          pageSize:10,
          pageNum:1,
          total:0,
          clauses:[
            {
              column:"type",
              operation:"=",
              value:""
            },
            {
              column:"content",
              operation:"like",
              value:""
            },
          ],
          sortMap:{
            updateDatetime:"DESC"
          }
        },
        selectList:[],
        dialogVisible:false
      }
    },
    methods:{
      handleSelectionChange(val){
        this.selectList = [];
        val.forEach(v =>{
          this.selectList.push(v.id);
        });
      },
      handleCurrentChange(value){
        this.search.pageNum = value;
        this.initData();
      },
      handleSizeChange(value){
        this.search.pageSize = value;
        this.initData();
      },

      deleteLogger(){
        if (!this.selectList.length > 0){
          Message.warning("至少需要选择一项!")
        }else {
          Message.confirm("确认是否删除？").then(()=>{
            this.$http.post("/logger/deleteLogger",this.selectList).then(res => {
              if (res.status === 200){
                Message.success(res.data);
                this.initData();
              }
            })
          }).catch(()=>{
            Message.info("取消删除")
          })
        }
      },
      showLogger(data){
        this.$http.get("/logger/get/"+data).then(res =>{
          if (res.status===200){
            this.dialogVisible = true;
            this.loggerData = res.data;
          }
        })
      },
      handleClose(){
        this.dialogVisible = false;
      },
      initData(){
        this.$http.post("/logger/page",this.search).then(res => {
          if (res.status === 200){
            this.loggerList = res.data.list;
            this.search.total = res.data.total;
          }
        })
      }


    },
    mounted(){
      this.initData()
    },
    filters:{
      UserFilter:function (data) {
        return Filter.UserNameFilter(data);
      }
    }
  }
</script>

<style scoped lang="less">
    .new{
        width: 100%;
        height: calc(~'100vh - 100px');
    }
</style>